<template>
  <div class='container'>
      <el-card>
        <!-- 头部搜索框和新增按钮 -->
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="22">
            <div class="grid-content bg-purple">
              <h5 class="sub-name">学科名称</h5>
              <el-input class="sub-input" v-model="pop.subjectName" placeholder="请输入内容" size="small"  ></el-input>
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
              </div></el-col>
          <el-col :span="2" style="margin-top:12px"><div class="grid-content bg-purple-light">
            <el-button @click="Addsub" class="sub-eidt" type="success" size="small"><i class="el-icon-edit"></i>新增学科</el-button>
            </div>
            </el-col>
        </el-row>
        <!-- 提示文案 -->
        <el-alert
        class="sub-alert"
          type="info"
          show-icon>
          {{`数据一共${total}条`}}
        </el-alert>
        <!-- 表格 -->
         <template>
            <el-table
              :data="arr"
              style="width: 100%">
              <el-table-column
              type="index"
                prop="date"
                label="序号"
                width="60">
              </el-table-column>
              <el-table-column
                prop="subjectName"
                label="学科名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="username"
                label="创建着"
                width="140">
              </el-table-column>
              <el-table-column
                label="创建日期"
                width="180">
                <template #default={row}>
                  {{row.addDate |parseTimeByString(`{y}-{m}-{d} {h}:{i}:{s}`)}}
                  </template>
              </el-table-column>
              <el-table-column
                prop="isFrontDisplay"
                label="前台是否显示"
                width="120">
              </el-table-column>
              <el-table-column
                prop="twoLevelDirectory"
                label="二级目录"
                width="120">
              </el-table-column>
              <el-table-column
                prop="tags"
                label="标签"
                width="120">
              </el-table-column>
              <el-table-column
                prop="totals"
                label="题目数量"
                width="120">
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
                <!-- #default={row} -->
                <template  class="sub-primary" #default={row}>
                  <el-link class="interval" type="primary" :underline="false" @click="toDirectorys(row.id,row.subjectName)">学科分类</el-link>
                  <el-link class="interval" type="primary" :underline="false" @click="toTags(row.id,row.subjectName)">学科标签</el-link>
                  <el-link class="interval" type="primary" :underline="false" @click="editSub(row)">修改</el-link>
                  <el-link class="interval" type="primary" :underline="false" @click="delSub(row)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
            class="sub-pagination"
              :background= true
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pop.page"
              :page-sizes="[1, 2, 5, 6,10]"
              :page-size="pop.pageSize"
              layout="prev, pager, next, sizes, jumper"
              :total="total">
            </el-pagination>
          </template>

      </el-card>
      <Addsubjects
      :dialogVisible="dialogVisible"
      @handleClose="handleClose"
      ref="edit"
      :row="row"
      />
  </div>
</template>

<script>
import Addsubjects from '../components/subjects-add.vue'
import { list, remove, simple } from '../../api/hmmm/subjects'
export default {
  name: 'subjects',
  data () {
    return {
      arr: [],
      total: 4, // 总数
      pop: {
        page: 1, // 当前页
        pagesize: 10, // 每页几条
        subjectName: ''
      },
      row: {},
      dialogVisible: false// 对话框显示隐藏
    }
  },
  components: { Addsubjects },
  created () {
    this.getList()
  },
  methods: {
    toDirectorys (id, name) {
      this.$router.push({
        path: 'directorys',
        query: {
          id,
          name
        }
      })
    },
    toTags (id, name) {
      this.$router.push({
        path: 'tags',
        query: {
          id,
          name
        }
      })
    },
    // 点击搜索框
    async search () {
      if (this.pop.subjectName === '') {
        this.$message.error('学科名称不能为空')
        return
      }
      const res = await simple(this.pop)
      console.log(res, 111)
      this.getList()
    },
    // 点击清除列表
    clear () {
      this.pop.subjectName = ''
    },
    // 删除学科列表
    delSub (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res, 122)
        if (this.arr.length === 1 && this.pop.page > 1) {
          this.pop.page--
        }
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击按钮显示编辑对话框
    editSub (row) {
      this.$refs.edit.numBack(row)
      this.dialogVisible = true
      this.row = row
    },
    // 点击按钮显示添加对话框
    Addsub () {
      this.dialogVisible = true
    },
    // 关闭对话框
    handleClose () {
      this.dialogVisible = false
    },
    // 获取学科列表渲染页面
    async getList () {
      const { data } = await list(this.pop)
      console.log(data)
      this.total = data.counts
      this.arr = data.items
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pop.pagesize = val
      this.pop.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pop.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  .sub-name{
   margin-right: 8px;
   display: inline-block;
  }
  .sub-input{
   margin-right: 10px;
   width: 200px;
  }
  .el-icon-edit{
    margin-right: 5px;
    margin-left: -3px;
  }
  .sub-alert{
    margin-top: 10px;
    // color: #000;
    font-weight:bold
  }
  .sub-pagination{
   display: flex;
   justify-content: end;
   margin-top: 15px;
  }
  .interval{
   margin-right: 10px;
  }
}
</style>
